import React, { Component, createRef } from 'react'

import styles from './index.module.css'
//吸顶处理

class Sticky extends Component {
  // 创建ref对象，指向站位元素和内容元素，用于操作dom
  placeholder = createRef()
  content = createRef()

  // 鼠标滚动事件的事件处理程序
  handleScroll = () => {
    // 获取DOM对象
    const placeholderEl = this.placeholder.current// 当一个ref通过render放入一个元素中，一个对节点的引用可以通过ref的current属性得到
    const contentEl = this.content.current

    
    //getBoundingClientRect返回了当前盒子在浏览器中的位置以及自身占据的空间的大小，除了 width 和 height 之外，
    //其他的属性是相对于视图窗口的左上角 来计算的。
    const { top } = placeholderEl.getBoundingClientRect()//获取内容元素的位置信息
    // const  top2  = contentEl.getBoundingClientRect().top//获取内容元素的位置信息
    // console.log("///")
    // console.log(top)
    // console.log(top2)
    if (top < 0) {
      // 吸顶
      contentEl.classList.add(styles.fixed)//内容区域添加一个fixed属性：固定标题栏在顶端
      // placeholderEl.style.height = '40px'
    } else {
      // 取消吸顶
      contentEl.classList.remove(styles.fixed)//内容区域添加一个fixed属性：固定标题栏在顶端
      // placeholderEl.style.height = '0px'
    }
  }

  // 周期开始   ：监听 滚动 事件
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll)
  }
  //周期结束    ： 组件卸载时解绑事件
  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll)
  }

  render() {
    return (
      <div>
        {/* 将创建的ref对象绑定元素，用于操作dom */}
        {/* 设置占位元素的原因是用来判断当前滚动条的位置，top<0则吸顶，不能直接用content的位置判断，因为他吸顶，一直=0 */}
        {/* 占位元素 */}
        <div ref={this.placeholder} />
        {/* 内容元素 */}
        {/* this.props.children指向包裹的元素 */}
        <div ref={this.content}>{this.props.children}</div>
      </div>
    )
  }
}

export default Sticky
